<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="lib/elementui/lib/theme-default/index.css"/>

    <!-- 引入组件库 -->
    <!-- 先引入 Vue -->
    <script src="lib/jquery/jquery-3.2.1.min.js"></script>
    <script src="lib/vue/vue.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <script src="lib/vue/vue-router.js"></script>
    <script src="lib/elementui/lib/index.js"></script>
    <title>Title</title>

    <style type="text/css">
        #box {
            width: 100%;
            height: 2000px;
        }
    </style>

</head>
<body>
<div id="box"></div>
<!-- vue监听滚动事件 -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data:function() {
            return {
                scroll: ''
            }
        },
        methods: {
            menu:function() {
                this.scroll = document.body.scrollTop;
                console.log(this.scroll)
            }
        },
        mounted:function() {
            window.addEventListener('scroll', this.menu)
        },
    })
</script>

</body>
</html>